<!--
  Copyright (c) 2017-present, Facebook, Inc.
  All rights reserved.

  This source code is licensed under the license found in the
  LICENSE file in the root directory of this source tree.
-->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="full-screen" content="yes"/>
  <meta name="screen-orientation" content="portrait"/>
  <meta name="viewport" content="user-scalable=no"/>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- build:js -->
  <script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
  <!-- endbuild -->
  <script src="js/display.js"></script>
  <script type="text/javascript">

    // The example below contains client-side code for an Instant Game
    // that communicates with a bot.
    // The code for the actual Messenger Bot needs to run in your own backend.
    // Make sure to check the server-examples/nodejs-bot folder for
    // server-side example code.
    // Alternatively, you can fork a fully working example
    // at https://glitch.com/edit/#!/elegant-chemistry
    // See also: https://developers.facebook.com/docs/games/instant-games/getting-started/bot-setup

    const display = window.Display;
    const MESSAGE_TO_BOT = { message: "Don't panic!" };

    window.onload = function() {
      FBInstant.initializeAsync()
      .then(FBInstant.startGameAsync)
      .then(onStart);
    }

    function onStart() {
      let entryPointData = FBInstant.getEntryPointData();
      if (entryPointData) {
        $('#bot-data').html(JSON.stringify(entryPointData));
      }
    }

    function sendBotData() {
      FBInstant.setSessionData(MESSAGE_TO_BOT);
      FBInstant.quit();
    }

  </script>

  <header>
    <h1>Instant Games Demos</h1>
    <h2>Server Communication</h2>
  </header>

  <section>
    <h3>Receive Message</h3>
    <p>This is the payload received by the bot through entry point data:</p>
    <pre id="bot-data" class="output">(empty)</pre>
  </section>

  <section>
    <h3>Send Message</h3>
    <p>Press the button below to send a custom message to the bot and exit the game.</p>
    <input type="button"
      id="btn-send-message"
      onclick="sendBotData();"
      value="Send Message to Bot"/>
  </section>

  <section>
    <p id="display-message" class="output"></p>
    <p id="display-success" class="success"></p>
    <p id="display-error" class="error"></p>
  </section>
</body>
</html>
